Add auto layout controls to node editor #8239
Conversation
Introduces auto layout functionality for the node editor using elkjs, including a new UI popover for layout options (placement strategy, layering, spacing, direction). Adds related state and actions to workflowSettingsSlice, updates translations, and ensures elkjs is included in optimized dependencies.
skunkworxdark
requested review from
psychedelicious,
blessedcoolant,
maryhipp and
hipsterusername
as code owners
github-actions
bot
added
frontend-deps
|
Here is a video showing the current operation: workflow-autolayout.mp4This is my first frontend change to invoke, and it was done heavily with the aid of Gemini. So be brutal in reviewing it, as I am sure I will have made glaring mistakes and poor coding style choices. |
- The auto-layout settings panel is updated to use `Select` dropdowns and `NumberInput` - The layout algorithm now uses the actual rendered dimensions of nodes from the DOM, falling back to estimates only when necessary. This results in a much more accurate and predictable layout. - The ELKjs library integration is refactored to fix some warnings
workflow-autolayout2.mp4 |
prettier
|
Will review and get this into v6.1.0 |
- The auto-layout settings panel is updated to use `Select` dropdowns and `NumberInput` - The layout algorithm now uses the actual rendered dimensions of nodes from the DOM, falling back to estimates only when necessary. This results in a much more accurate and predictable layout. - The ELKjs library integration is refactored to fix some warnings
prettier
psychedelicious
force-pushed
the
Workflow-AutoLayout
branch
from
f9a4a57 to
62cce28
Compare
There was a problem hiding this comment.
Cool, works well! I cleaned up the importing of the library & left a couple minor comments.
One problem - the ElkJS library is 1.5 megabytes. That drastically increases the bundle size. Reviewing the library, it's an automated Javascript transpilation of the Elk library, which is written in Java.
I'm reluctant to add such a massive dependency. I noticed reactflow suggests d3-hierarchy as an alternative layout engine.
- https://bundlephobia.com/package/elkjs@0.10.0
- https://bundlephobia.com/package/d3-hierarchy@3.1.2
- https://bundlephobia.com/package/dagrejs@0.2.1
We currently use dagrejs to do auto-layouting when loading a workflow.
Can we use dagrejs or d3-hierarchy and provide a similar user experience without increasing the bundle size so much? I haven't explored the options these libraries provide.
Also, whichever direction we go in, we should only have a single graph lib dependency. We should mgirate the workflow loading logic to use whichever we choose.
invokeai/frontend/web/src/features/nodes/hooks/useAutoLayout.ts
Outdated
Show resolved
Hide resolved
invokeai/frontend/web/src/features/nodes/store/workflowSettingsSlice.ts
Outdated
Show resolved
Hide resolved
|
yikes, I hadn't realised the size of that package. As I said previously, this was coded with a lot of help from Gemini, as I have very little React/TS experience. To be fair, I was surprised it worked as well as it did :) I will take a look at your suggestions and see what I can come up with. |
…k/InvokeAI into Workflow-AutoLayout
updated to use dagrejs - it has less layout options but is already included but this is still WIP as some nodes don't report the height correctly. I am still investigating this...
|
I think I have addressed all your previous points. I updated to use dagrejs - it has less layout options then elkjs, but is already included, so no increase in bundle size. However, this is still WIP (so still requires some cleanup) as some nodes don't report the height correctly and are squashed together after an auto layout. From what I can see so far, the nodes with the boolean toggles are reported as smaller, but they are not the only ones. It is late here now, so I will continue to look at this tomorrow. If you can see anything I have done wrong or missed, please feel free to make suggestions. |
skunkworxdark
changed the title
update to fix layout issues
|
It is ready for review again. I found the issue and cleaned up the code. |
workflow-autolayout3.mp4 |
- pretty useAutoLayout.ts - add missing type import in ViewportControls.tsx - update pnpm-lock.yaml with elkjs removed
pnpm fix
Fix Frontend check - remove unused export from workflowSettingsSlice.ts Update so that if you have a single node selected, it will auto layout all nodes, as this is a common thing to have a single node selected and means that you don't have to unselect it.
|
After a couple of minor fixes and a merge to main, it should be fully ready for review. |
Summary
Introduces auto layout functionality for the workflow editor using elkjs, including a new UI popover for layout options (placement strategy, layering, spacing, direction). Adds related state and actions to workflowSettingsSlice, updates translations, and ensures elkjs is included in dependencies.
If you select nodes, only those will have auto layout applied. Otherwise, all nodes in a workflow will be affected.
Related Issues / Discussions
NA
QA Instructions
Load a workflow and Auto Layout. With and without nodes selected.
Merge Plan
NA
Checklist
What's Newcopy (if doing a release after this PR)